<template>
  <!-- 货位监控 1 42列  2 54 列 -->
  <div>
    <div id="snap-svg" v-visibility-change="change" style="height: 100vh; width: 100%; overflow: hidden">
      <inbody> </inbody>
      <svg id="svg" />
      <!-- 下面固定功能按钮 -->
      <!-- <Locmapcontainer :currentAlias="currentAlias" ref="Locmapcontainer" @currentRow="currentRowfn" /> -->
    </div>
    <!-- 是否锁定的dialog -->
    <el-dialog :visible.sync="locdialog" @closed="closelocdialog">
      <el-form :model="locdialogData" label-width="160px" size="mini" style="text-align: center">
        <el-form-item label="货架名称">
          <span>{{ locdialogData.name }}</span>
        </el-form-item>
        <el-form-item label="是否锁定">
          <el-switch v-model="locdialogData.isLock" active-text="锁定" inactive-text="解锁" @change="changeIslock">锁定</el-switch>
        </el-form-item>
        <el-form-item label="货位类型">
          <span>{{ locdialogData.locType }}</span>
        </el-form-item>
        <el-form-item label="货位状态">
          <span>{{ locdialogData.state }}</span>
        </el-form-item>
        <el-form-item label="托盘号">
          <span>{{ locdialogData.unitId }}</span>
        </el-form-item>
        <el-form-item label="基准货架">
          <el-switch v-model="locdialogData.basicShelf" active-text="是" inactive-text="否" @change="changeBasicShelf">锁定</el-switch>
        </el-form-item>
        <el-form-item label="区域">
          <span>{{ locdialogData.zoneName }}</span>
        </el-form-item>
        <el-form-item label="备注">
          <span v-show="isedit">{{ locdialogData.remark }}</span>
          <el-input style="width: 80%" v-model="remarkData" v-show="!isedit" :placeholder="locdialogData.remark"></el-input>
          <el-button v-show="isedit" type="text" @click="isedit = !isedit">编辑</el-button>
          <el-button v-show="!isedit" type="text" @click="submitRemark">提交</el-button>
        </el-form-item>
        <el-button @click="destinationClick(locdialogData.name)">目的地</el-button>
      </el-form>
    </el-dialog>
    <!--备注的dialog  -->
    <el-dialog :visible.sync="dialogRemark" @close="dialogRemarkCancel">
      <el-input v-model="remarkData" placeholder="请输入备注"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogRemarkConfirm">确 定</el-button>
        <el-button @click="dialogRemarkCancel">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 输入目的点的dialog -->
    <el-dialog :visible.sync="destinationDialog">
      <span>起始点:{{ LocStart }}</span> --
      <el-input style="width: 60%" v-model.trim="toLoc" placeholder="请输入目的点" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="comfirmToLoc">确 定</el-button>
        <el-button @click="destinationDialog = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 输送机的dialog -->
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <el-button size="mini" type="success" @click="operateRun()">运行</el-button>
      <el-button size="mini" type="primary" @click="operateStop()">停止</el-button>
      <el-button size="mini" type="danger" @click="operateRelieve()">解除异常</el-button>
      <el-button size="mini" type="info" @click="operateDetails()">详情</el-button>
      <el-button size="mini" type="danger">禁用</el-button>
      <div v-if="particularsclick" style="margin-top: 20px">
        <p v-for="(item, key, index) in particularsData" :key="index" style="font-size: 16px; text-align: left">
          <span style="width: 150px; display: inline-block">{{ key }}</span> :
          <span style="margin-left: 30px; width: 100px; display: inline-block">{{ item }}</span>
        </p>
      </div>
    </el-dialog>

    <div id="card">
      <el-row>
        <el-col :span="4" style="text-align: center">
          <el-tooltip content="复位">
            <el-button class="iconfont el-icon-aim" type="text" color="black" @click.native="handleReset" />
          </el-tooltip>
        </el-col>
        <el-col :span="4" style="text-align: center">
          <el-tooltip content="图例">
            <el-popover placement="bottom" trigger="click">
              <img src="@/assets/images/tips.png" style="width: 150px" alt="" />
              <el-button slot="reference" type="text" class="el-icon-info" />
            </el-popover>
          </el-tooltip>
        </el-col>
        <el-col :span="4" style="text-align: center">
          <el-tooltip :content="isfull ? '退出全屏' : '全屏'">
            <el-button type="text" :class="
              isfull
                ? 'iconfont el-icon-tuichuquanping'
                : 'iconfont el-icon-quanping'
            " color="black" @click.native="handleFullscreen" />
          </el-tooltip>
        </el-col>
        <el-col :span="12" style="text-align: center">
          <el-select v-model="currentAlias" placeholder="请选择" @change="changecurrentRow">
            <el-option label="A01" :value="1" />
            <el-option label="A02" :value="2" />
          </el-select>
        </el-col>
      </el-row>
      <!-- <Icon type="md-add-circle"  size="24" color="black"/>
    <Icon type="md-remove-circle" size="24" color="black"/>
    <Icon type="md-locate" size="24" color="black"/>
    <Icon type="md-alert" size="24" color="black"/>
    <Icon type="md-qr-scanner" size="24" color="black" /> -->
    </div>
  </div>
</template>
<script>
const signalR = require("@microsoft/signalr");
// import { InitSvg, HandleSingalRData, getsingalRData } from "./SvgLayout.js";
// import { doColorAnimate, doPositionAnimate, getModeColor, getDeviceAppearance } from './index'
import Snap from "snapsvg-cjs";
// import Locmapcontainer from "./components/Locmap-container/index";
import {
  GetLocSizeApi,
  GetLocInfoByAisleApi,
  UpdateWcsLockApi,
  UpdateWcsLocationBasicShelfApi,
} from "@/api/LocInnerManageApi";
import { Message } from "element-ui";
// import locManagesvg from '@/assets/svg/locManage.svg'
import { GetDeviceDataApi, HandleDeviceOperate } from "@/api/dashboard";
import * as SvgConfig from "./SvgConfig.js";
import svgImg from "../../assets/svg/输送机械.svg";
import tooltipUri from "@/assets/svg/device_comment.svg"; // 提示框Svg地址
export default {
  name: "LocMonitor",

  data() {
    return {
      isfull: false,
      currentAlias: 1,
      lev: 3, // 行
      bay: 0, // 列
      group: {},
      x: 10,
      y: 10,
      // svg的大小
      svglength: 30,
      // svg的边距
      svgmargin: 5,
      // 起始点
      LocStart: "",
      //目的点：
      toLoc: "",
      srmName: "",
      /** 是否点击了详情 */
      particularsclick: false,
      //目的点dialog
      destinationDialog: false,
      //输送机的dialog
      dialogVisible: false,
      // 输送机数据
      bindSingalRSrm: [],
      locInfos: [],
      isComlpeted: false,
      // 字典
      dic: [
        { key: "Empty", color: "#909399" },
        { key: "Store", color: "#909399" },
        { key: "In", color: "#67C23A" },
        { key: "Out", color: "#ff0" },
        // { key: 'Lock', color: '#303133' },
        { key: "StoreOne", color: "#909399" },
        { key: "StoreTwo", color: "#909399" },
      ],
      // locdialog显示
      locdialog: false,
      //locdialog里的 是否锁定的弹窗
      dialogRemark: false,
      //locdialog里的 是否锁定的弹窗的备注
      remarkData: "",
      //备注是否编辑
      isedit: true,
      // dialog里的信息数据
      locdialogData: {},
      // 判断是否请求数据
      isactive: true,
      // 定时器
      timer: "",
      svg: {},
      //悬浮提示框
      tooltip: null,
      currentTips: null,
    };
  },
  created() {
    if (!this.$route.query.currentAlias) {
      this.$router.replace({
        path: "/LocInnerManage/LocMonitor?currentAlias=1",
        query: {
          currentAlias: this.currentAlias,
        },
      });
    }
  },
  mounted() {
    // InitSvg(this)
    var svg = Snap("#svg");
    svg.zpd();
    this.svg = svg;
    this.group = svg.select("g");
    // console.log(this.$refs.Locmapcontainer);
    // drawloc(this.lav, this.bay)
    // Snap.load(tooltipUri, (data) => {
    //   this.tooltip = data.select("g");
    //   this.group.select("svg").append(this.tooltip);
    // });
    this.timer = setInterval(() => {
      if (this.isactive) {
        this.GetLocInfoData();
      }
    }, 1000);
    this.isComlpeted = true;
    setTimeout(() => {
      this.bindSingalRData();
    }, 500);

    this.currentAlias = parseInt(this.$route.query.currentAlias);
    this.GetLocSizedata();
  },
  watch: {
    currentAlias: function (newValue, oldValue) {
      console.log("currentAliasChanged", newValue, oldValue);
      this.GetLocSizedata();
    },
  },
  beforeDestroy() {
    this.$signalR.off("WcsMoniorData");
    this.$signalR.offPush("PushModeStatus");
  },
  activated() {
    this.bindSingalRData();
    this.isactive = true;
    console.log("activated");
  },
  deactivated() {
    this.$signalR.off("WcsMoniorData");
    this.$signalR.offPush("PushModeStatus");
    this.isactive = false;
    console.log("deactivated");
    // clearInterval(this.timer);
  },
  destroyed() {
    // 关闭定时器
    clearInterval(this.timer);
  },

  methods: {
    // 改变当前层数 并传给父组件
    changecurrentRow(data) {
      let query = `?currentAlias=${data}`;
      this.$router.replace({
        path: "/LocInnerManage/LocMonitor" + query,
        query: {
          currentAlias: this.currentAlias,
        },
      });
      this.handleReset();
    },
    // 复位
    handleReset() {
      const svg = Snap("#svg");
      svg.zpd(function (_err, paper2) {
        svg.zoomTo(1, 1, mina.linear, function (_err, paper3) {
          svg.panTo(0, 0);
        });
      });
    },
    handleFullscreen() {
      const main = document.getElementById("snap-svg");
      if (this.isfull) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (main.requestFullscreen) {
          main.requestFullscreen();
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen();
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen();
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen();
        }
      }
    },

    // 标签切换事件
    change(evt, hidden) {
      /** 标签切换事件(v-visibility-change="change") */
      // hidden：false切换回当前页面，true切换到别的页面
      console.log(hidden);
      // if (hidden) {
      //   this.isactive = true;
      // } else {
      //   this.isactive = false;
      // }
      if (hidden) {
        this.$signalR.off("WcsMoniorData");
        this.$signalR.offPush("PushModeStatus");
      } else {
        if (this.isactive) {
          this.bindSingalRData();
        }
      }
    },
    /** 绑定后端SingalR数据 */
    bindSingalRData() {
      this.$signalR.on("WcsMoniorData", (data) => {
        const dataObj = JSON.parse(data);
        // console.log(dataObj.monitorSrmDatas, "dataObj");
        this.bindSingalRSrm = dataObj.monitorSrmDatas;

        // console.log(this.bindSingalRSrm, "bindSingalRSrm", this.isComlpeted,dataObj);
        if (this.isComlpeted) {
          this.HandleSingalRData(dataObj);
          // console.log(dataObj);
        }
      });
      this.$signalR.onPush("PushModeStatus", (data) => {
        // console.log('bindSingalRData', data)
      });
    },
    // 循环画图方法
    drawloc(lev, bay) {
      let srmid,
        srmid2 = "";
      if (this.currentAlias === 1) {
        srmid = "srm01";
        srmid2 = "srm02";
      } else if (this.currentAlias === 2) {
        srmid = "srm03";
        srmid2 = "srm04";
      }
      let srm01 = this.group.paper.rect(83, 265, 60, 40).attr({
        fill: "#50A0FF",
        id: srmid,
        class: "srm01",
      });
      let length = (this.svglength + this.svgmargin) * bay;
      let srm02 = this.group.paper.rect(length + 50, 265, 60, 40).attr({
        fill: "#50A0FF",
        id: srmid2,
      });
      let rail = this.group.paper.rect(83, 279, length, 10).attr({
        fill: "black",
        id: "trail01",
      });
      srm01.click(() => {
        this.dialogVisible = true;
        this.srmName = srmid;
        console.log(this.bindSingalRSrm, "bindSingalRSrm", this.srmName);
      });
      srm02.click(() => {
        this.dialogVisible = true;
        this.srmName = srmid2;
      });
      this.group.append(rail);
      this.group.append(srm01);
      this.group.append(srm02);

      //第一排
      let row = (this.currentAlias - 1) * 2 + 1;
      for (let a = 1; a <= lev; a++) {
        for (let i = 1; i <= bay; i++) {
          const id = `${row.toString().padStart(2, "0")}${i
            .toString()
            .padStart(3, "0")}${(lev + 1 - a).toString().padStart(2, "0")}`;
          var c1 = this.group.paper
            .rect(
              i * (this.svglength + this.svgmargin) + 50,
              a * (this.svglength + this.svgmargin) + 100,
              this.svglength,
              this.svglength
            )
            .attr({
              fill: "#909399", //
              id,
              // stroke: "red",
            });

          // if(this.locdialogData.remark.length>0){
          //   c1.attr({
          //     stroke: "red",
          //   })
          // }
          // 增加点击事件显示dialog
          c1.click((e) => {
            this.locdialog = true;
            // console.log(c1,id, "id");
            this.locdialogData = this.locInfos.find((item) => item.name === id);
            console.log(this.locInfos, this.locdialogData);
          });
          c1.hover((e) => {
            console.log(e, "eee", e.target.x.baseVal.value);
            // var svg = Snap("#svg");
            // var test1 = svg.paper.circle(50, 50, 40).attr({
            //   fill: "#f00", // 红色
            //   stroke: "#ddd",
            // });
            // c1.after(test1);
            this.locdialogData = this.locInfos.find((item) => item.name === id);
            console.log(this.locdialogData);
          });
          this.group.append(c1);
        }
      }
      // 循环画出托盘
      for (let a = 1; a <= lev; a++) {
        for (let i = 1; i <= bay; i++) {
          const id = `${row.toString().padStart(2, "0")}${i
            .toString()
            .padStart(3, "0")}${(lev + 1 - a).toString().padStart(2, "0")}`;
          const boxid = `${id}_box`;
          var box = this.group.paper
            .rect(
              i * (this.svglength + this.svgmargin) + 55,
              a * (this.svglength + this.svgmargin) + 105,
              this.svglength - 10,
              this.svglength - 10
            )
            .attr({
              fill: "#F5A931",
              id: boxid,
              display: "none",
            });
          // 增加点击事件显示dialog
          box.click(() => {
            this.locdialog = true;
            this.remarkData = "";
            console.log(boxid, id, "id");
            this.locdialogData = this.locInfos.find((item) => item.name === id);
          });
          this.group.append(box);
        }
      }

      //第二排
      row++;
      for (let a = 1; a <= lev; a++) {
        for (let i = 1; i <= bay; i++) {
          const id = `${row.toString().padStart(2, "0")}${i
            .toString()
            .padStart(3, "0")}${(lev + 1 - a).toString().padStart(2, "0")}`;
          var c1 = this.group.paper
            .rect(
              i * (this.svglength + this.svgmargin) + 50,
              a * (this.svglength + this.svgmargin) + 300,
              this.svglength,
              this.svglength
            )
            .attr({
              fill: "#909399", //
              id,
            });
          // 增加点击事件显示dialog
          c1.click((e) => {
            this.locdialog = true;
            console.log(id, "id", e);
            this.locdialogData = this.locInfos.find((item) => item.name === id);
            console.log(this.locInfos, this.locdialogData);
          });
          c1.hover((e) => {
            // var svg = Snap("#svg");
            // console.log(1, e, svg);
            // var test1 = svg.paper.circle(50, 50, 40).attr({
            //   fill: "#f00", // 红色
            // });
            // c1.after(test1);
          });
          this.group.append(c1);
        }
      }
      // 循环画出托盘
      for (let a = 1; a <= lev; a++) {
        for (let i = 1; i <= bay; i++) {
          const id = `${row.toString().padStart(2, "0")}${i
            .toString()
            .padStart(3, "0")}${(lev + 1 - a).toString().padStart(2, "0")}`;
          const boxid = `${id}_box`;
          var box = this.group.paper
            .rect(
              i * (this.svglength + this.svgmargin) + 55,
              a * (this.svglength + this.svgmargin) + 305,
              this.svglength - 10,
              this.svglength - 10
            )
            .attr({
              fill: "#F5A931",
              id: boxid,
              display: "none",
            });
          // 增加点击事件显示dialog
          box.click(() => {
            this.locdialog = true;
            this.remarkData = "";
            console.log(boxid, id, "id");
            this.locdialogData = this.locInfos.find((item) => item.name === id);
          });
          this.group.append(box);
        }
      }
      // 一层 画出坐标数字y轴
      for (let a = lev; a > 0; a--) {
        var text1 = this.group.paper
          .text(
            50,
            a * (this.svglength + this.svgmargin) + 120,
            `${lev - a + 1}`
          )
          .attr({
            fill: "#fff",
            "font-size": "20",
          });
        this.group.append(text1);
      }
      // 一层 画出坐标数字x轴
      for (let i = 1; i <= bay; i++) {
        var text2 = this.group.paper
          .text(
            i * (this.svglength + this.svgmargin) + 50,
            (lev + 1) * (this.svglength + this.svgmargin) - 20,
            `${i}`
          )
          .attr({
            fill: "#fff",
            "font-size": "20",
          });
        this.group.append(text2);
      }
      // 二层 画出坐标数字y轴
      for (let a = lev; a > 0; a--) {
        var text1 = this.group.paper
          .text(
            50,
            a * (this.svglength + this.svgmargin) + 320,
            `${lev - a + 1}`
          )
          .attr({
            fill: "#fff",
            "font-size": "20",
          });
        this.group.append(text1);
      }
      // 二层 画出坐标数字x轴
      for (let i = 1; i <= bay; i++) {
        var text2 = this.group.paper
          .text(
            i * (this.svglength + this.svgmargin) + 50,
            (lev + 1) * (this.svglength + this.svgmargin) + 320,
            `${i}`
          )
          .attr({
            fill: "#fff",
            "font-size": "20",
          });
        this.group.append(text2);
      }

      let test1 = document.getElementById("0100101");
      // var t1 = this.svg.select(`#${CSS.escape('0100101')}`).paper.circle(50, 50, 40).attr({ fill: "#fc0",});
      // var imgSVG = document.createElementNS(
      //   "http://www.w3.org/2000/svg",
      //   "image"
      // );
      // imgSVG.href.baseVal = svgImg; //svg设置image的url图片，要用image.href.baseVal
      // imgSVG.setAttribute("width", 30);
      // imgSVG.setAttribute("height", 30);
      // imgSVG.setAttribute("class", "equ");
      // imgSVG.setAttribute("x", "85");
      // imgSVG.setAttribute("y", "205");

      var t1 = this.svg.paper.image(svgImg, 85, 205, 30, 30);
      // (t1.node.style = "pointer-events:none")

      this.group.append(t1);
    },
    // 子组件传递当前层数
    currentRowfn(data) {
      // console.log(data, '子组件传的值')
      this.currentAlias = data;
      console.log(this.currentAlias, "this.currentAlias");
      this.GetLocSizedata();
    },
    // 拿到当前层多少列行
    GetLocSizedata() {
      if (this.currentAlias === 1) {
        this.bay = 42;
      } else if (this.currentAlias === 2) {
        this.bay = 54;
      } else {
        this.bay = 0;
      }

      const All = this.group.selectAll("*");
      All.forEach((x) => x.remove());
      // 绘制对应的数量
      this.drawloc(this.lev, this.bay);
    },
    // 获取指定排号的货架信息数据
    async GetLocInfoData() {
      const res = await GetLocInfoByAisleApi(this.currentAlias);
      // console.log(res.data)
      this.locInfos = res.data.data;
      // console.log(this.locInfos, 'locInfos')

      this.locInfos.forEach((item) => {
        const el = document.getElementById(`${item.name}`);
        // console.log(item, 'locType',el)
        if (el === null) {
          console.log(item.name, "name");
        }
        if (item.locType === null || item.locType.length <= 0) {
          el.style.display = "none";
        }

        // console.log(`${item.name}_box`, 'id')
        const box = document.getElementById(`${item.name}_box`);
        // console.log(`${item.name}_box`, box, 'box')
        const arr = ["Store", "StoreOne", "StoreTwo"];
        if (arr.includes(item.state)) {
          // console.log(box, 'box')
          box.style.display = "block";
        } else {
          box.style.display = "none";
        }
        this.dic.forEach((value) => {
          if (item.state === value.key) {
            // 改变svg颜色
            // console.log(item,value);
            if (item.isLock) {
              el.setAttribute("fill", "#303133");
            } else {
              el.setAttribute("fill", value.color);
              // if (item.state === 'In') {
              //   console.log(el.fill, 'el', value.color)
              //   console.log(this)
              // }
            }
            if (item.basicShelf) {
              el.setAttribute("stroke", "#fff");
              //   // console.log(item,el.getAttribute('x'));
              //   const a = el.getAttribute("flag");
              //   if (!a) {
              //     const x = el.getAttribute("x");
              //     const y = el.getAttribute("y");
              //     el.setAttribute("x", (+x + 2).toString());
              //     // console.log((+x+2).toString(),"(+x+2).toString()");
              //     el.setAttribute("y", (+y + 2).toString());
              //     el.setAttribute("flag", "1");
              //   }
              //   // console.log(a,'flag');
              //   el.setAttribute("width", "26");
              //   el.setAttribute("height", "26");
            } else {
              if (item.remark.length > 0) {
                // console.log(item.remark.length,'remark');
                el.setAttribute("stroke", "red");
              } else {
                el.removeAttribute("stroke");
              }
              //   const a = el.getAttribute("flag");
              //   if (a) {
              //     const x = el.getAttribute("x");
              //     const y = el.getAttribute("y");
              //     el.setAttribute("x", (+x - 2).toString());
              //     el.setAttribute("y", (+y - 2).toString());
              //     el.setAttribute("flag", "");
              //   }
              //   el.setAttribute("width", "30");
              //   el.setAttribute("height", "30");
            }
          }
        });
      });
    },
    //关闭locdialog
    closelocdialog() {
      this.locdialog = false;
      this.isedit = true;
    },
    // 改变锁定状态
    changeIslock(data) {
      console.log(data);
      this.$confirm(`是否${data ? "锁定" : "解锁"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.remarkData = "";
          console.log(this.locdialogData.isLock, "isLock");
          if (this.locdialogData.isLock) {
            this.dialogRemark = true;
          }
          // console.log(this.locdialogData.name,this.remarkData);
          // await UpdateWcsLockApi({
          //   wcsLocName: this.locdialogData.name,
          //   locStatus: 0,
          //   isLock: data ? 1 : 0,
          //   remark: this.remarkData
          // });
        })
        .catch(() => {
          console.log("取消");
          this.locdialogData.isLock = !data;
        });
    },
    //备注dailog确认按钮
    async dialogRemarkConfirm() {
      console.log(this.remarkData, "this.remarkData");
      const res = await UpdateWcsLockApi({
        wcsLocName: this.locdialogData.name,
        locStatus: 0,
        isLock: this.locdialogData.isLock ? 1 : 0,
        remark: this.remarkData,
      });
      console.log(res);
      this.dialogRemark = false;
      this.locdialog = false;
      Message.success("操作成功");
    },
    //备注dailog取消按钮
    dialogRemarkCancel() {
      (this.dialogRemark = false),
        (this.locdialogData.isLock = !this.locdialogData.isLock);
    },
    //提交备注按钮
    async submitRemark() {
      const res = await UpdateWcsLockApi({
        wcsLocName: this.locdialogData.name,
        locStatus: 0,
        isLock: this.locdialogData.isLock ? 1 : 0,
        remark: this.remarkData,
      });
      this.isedit = !this.isedit;
      this.locdialog = false;
      Message.success("修改成功");
      this.remarkData = "";
    },
    //修改基准货架
    changeBasicShelf(data) {
      this.$confirm(`${data ? "确定" : "取消"}为基准货架？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log([
            { wcsLocName: this.locdialogData.name, basicShelf: data },
          ]);
          const res = await UpdateWcsLocationBasicShelfApi([
            {
              wcsLocName: this.locdialogData.name,
              basicShelf: data,
            },
          ]);
          console.log(res);
          Message.success("修改成功");
        })
        .catch(() => {
          console.log("取消");
          this.locdialogData.basicShelf = !data;
        });
    },
    //添加目的点dialog
    destinationClick(data) {
      this.destinationDialog = true;
      this.LocStart = data;
    },
    //添加目的点dialog的确定按钮
    comfirmToLoc() {
      console.log(this.toLoc);
    },
    // 运行
    operateRun() {
      HandleDeviceOperate(this, this.srmName, 3);
    },
    // 停止
    operateStop() {
      HandleDeviceOperate(this, this.srmName, 4);
    },
    // 解除异常
    operateRelieve() {
      HandleDeviceOperate(this, this.srmName, 8);
    },
    // 详情
    async operateDetails() {
      if (!this.particularsclick) {
        const res = await GetDeviceDataApi(this.srmName);
        console.log(res.data, "res");
        this.particularsData = JSON.parse(res.data.deviceInfo);
        this.particularsclick = true;
      } else {
        this.particularsclick = false;
      }
    },
    //处理 后端数据
    HandleSingalRData() {
      //当前所有的svg
      // console.log(this.bindSingalRSrm);
      let paper = this.group.selectAll("*");
      let srmData = [];
      paper.forEach((el) => {
        let name = el.node.id;
        if (name.indexOf("srm") > -1) {
          //筛选当前的 输送机
          let dev = this.bindSingalRSrm.find((item) => item.name === name);
          if (dev) {
            const color = SvgConfig.GetModeColor(dev.mode);
            let trail =
              (this.svglength + this.svgmargin) *
                this.bay *
                (dev.bayNum / 100) +
              (this.svglength + this.svgmargin + this.svgmargin);

            el.animate({ x: trail }, 1000);
            if (dev.unitId.length > 0) {
              let srm = document.getElementById(name);

              // console.log(el.node, el.node.x.baseVal.value);
              // let boxX = el.node.x.baseVal.value + 5;
              // let boxY = el.node.y.baseVal.value + 5;
              // let test = this.group.paper.rect(boxX, boxY, 30, 30).attr({
              //   fill: "#E6A23C",
              //   id: "box",
              // });
              // this.group.append(test);
              // test.animate(
              //   {
              //     x: trail,
              //   },
              //   500
              // );
            }
            // const boxName = data.name + "_box";
            // const box = GetBox(boxName, dev);
            // if (data.unitId.length > 0) {
            //   AddGoods(boxName, dev);
            // } else {
            //   RemoveGoods(boxName);
            // }
            // SvgConfig.DoPositionAnimate(box, matrix)
            SvgConfig.DoColorAnimate(el, color);
          }
          // console.log(el.node.id);
          // SetSrmDevice(el, name)
          srmData.push(el);
        }
      });
      // console.log(srmData,'srmData');
      this.isComlpeted = true;
    },
  },
};
</script>

<style lang="scss" scoped>
#svg {
  width: 100%;
  height: 100%;
  // background-color: white;
  background-color: #100c38;
}
.srm01::after {
  content: "要插入的内容";
  color: red;
  font-size: 6px;
}

#card {
  box-shadow: 0 4px 8px 0 #454545;
  background: #fff;
  padding: 6px 6px;
  border-radius: 8px;
  /* position: absolute;
  bottom: 12px; */
  z-index: 999;
  width: 260px;
  position: fixed;
  left: 45%;
  bottom: 10px;
  /* height: 40px; */
}
.demo-svg {
  float: left;
  width: 68px;
  height: 48px;
  /* border-radius: 6px; */
  display: inline-block;
}
.h3NewStyle {
  float: left;
  font-size: 12px;
  color: #2f3033;
  font-weight: 500;
  margin: 0px;
}
.description {
  margin-top: -6px;
  font-size: 12px;
  transform: scale(0.9);
  color: #7e7f8c;
}
</style>

